<template>
  <div class="vedio">
    <div class="video-wrapper">
      <video-player class="vjs-custom-skin" :options="playerOptions" x5-playsinline="true" playsinline="true" webkit-playsinline="true"></video-player>
    </div>
  </div>
</template>

<script>
import { getVideoUrl } from './../../../../api'
export default {
  name: 'Vedio',
  data () {
    return {
    // 视频插件配置
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        atuoplay: true,
        controls: true,
        proload: 'auto',
        muted: false,
        loop: true,
        language: 'zh-CN',
        aspectRadio: '16:9',
        fluid: true,
        sources: [
          {
            type: 'application/x-mpegURL',
            src: ''
          }
        ],
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }
    }
  },
  created () {
    this.getVideoUrlData()
  },
  methods: {
    // 获取视频地址
    async getVideoUrlData () {
      const result = await getVideoUrl()
      console.log(result)
      this.playerOptions.sources[0].src = result.data
      // 使用JS实现视频的动态播放
      this.playerOptions.autoplay = true
    }
  }
}
</script>

<style scoped lang="less">
  .vjs-big-play-button {
    left: 50% !important;
    top: 50% !important;
    margin-top: -1em;
    margin-left: -1.5em;
  }
</style>
